<template>
  <a-card class="table-card">
    <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData = {} }">
      <a-form-item label="" class="table-search-item">
        <JeepayDateRangePicker
          ref="dateRangePicker"
          v-model:value="vdata.searchData['queryDateRange']"
          customDateRangeType="date"
        />
      </a-form-item>
      <JeepaySearchInfoInput v-if="props.method == 'store'" v-model:value="vdata.searchData['storeId']" placeholder="门店ID" :textUpStyle="true" showType="MCH_STORE" />
      <jeepay-text-up v-if="props.method == 'wayCode'" v-model:value="vdata.searchData['wayCode']" :placeholder="'支付代码'" />
      <JeepaySelect>
        <a-select v-if="props.method == 'wayCodeType'" v-model:value="vdata.searchData['wayType']" :placeholder="'支付渠道'" defaultValue="">
          <a-select-option value="">全部</a-select-option>
          <a-select-option value="ALIPAY">支付宝</a-select-option>
          <a-select-option value="YSFPAY">云闪付</a-select-option>
          <a-select-option value="WECHAT">微信</a-select-option>
          <a-select-option value="UNIONPAY">银联</a-select-option>
          <a-select-option value="DCEPPAY">数字人民币</a-select-option>
          <a-select-option value="OTHER">其他</a-select-option>
        </a-select>
      </JeepaySelect>
    </JeepaySearchForm>
    <!-- 列表渲染 -->
    <JeepayTable
      ref="infoTable"
      :init-data="true"
      :req-table-data-func="reqTableDataFunc"
      :table-columns="props.tableColumns"
      :statisticsIsShow="true"
      :search-data="vdata.searchData"
      row-key="mchNo"
      :tableExportFunc="tableExportFunc"
      @btnLoadClose="btnLoading=false"
    >
      <template #headerCell="{ column }">
        <span v-if="column.tooltipTitle">
          {{ column.title }}
          <a-tooltip :title="column.tooltipTitle"><info-circle-outlined /></a-tooltip>
        </span>
      </template>
      <template #topBtnSlot>
        <a-button type="primary" @click="tableExportFunc">
          <plus-outlined />导出表格
        </a-button>
      </template>
      <template #statistics>
        <div class="statistics-list">
          <div v-for="(item, index) in count" :key="index" class="item">
            <div v-if="item.type == 'line'" class="line" />
            <div class="title">{{ item.title }}</div>
            <div v-if="item.title" class="amount" :style="{ color: item.textColor }">
              <span class="amount-num">{{ item.content }}</span>
            </div>
          </div>
        </div>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'allAmount'">
          <b style="color: #15B86C;">￥{{ record.allAmount / 100 }}</b>
        </template>
        <template v-if="column.key === 'payAmount'">
          <b style="color: #15B86C;">￥{{ record.payAmount / 100 }}</b>
        </template>
        <template v-if="column.key === 'fee'">
          <b style="color: #FF6848;">￥{{ record.fee / 100 }}</b>
        </template>
        <template v-if="column.key === 'refundFee'">
          <b style="color: #15B86C;">￥{{ record.refundFee / 100 }}</b>
        </template>
        <template v-if="column.key === 'refundAmount'">
          <b style="color: #FF6848;">￥{{ record.refundAmount / 100 }}</b>
        </template>
        <template v-if="column.key === 'refundCount'">
          <b style="color: #FF6848;">{{ record.refundCount }}</b>
        </template>
        <template v-if="column.key === 'payCount'">
          <b style="color: #15B86C;">{{ record.payCount }}/{{ record.allCount }}</b>
        </template>
        <template v-if="column.key === 'round'">
          <b style="color: #FF8800;">{{ record.round }}%</b>
        </template>
        <template v-if="column.key === 'wayTypeName'">
          {{ record.wayType == 'WECHAT'?'微信':record.wayType == 'ALIPAY'?'支付宝':record.wayType == 'YSFPAY'?'云闪付':record.wayType == 'UNIONPAY'?'银联':record.wayType == 'DCEPPAY'?'数字人民币':'其他' }}
        </template>
      </template>
    </JeepayTable>
  </a-card>
</template>

<script lang="ts" setup>
import { API_URL_STATISTIC, $exportExcel, exportExcelUrl, req } from '@/api/manage'
import { defineProps, reactive, ref } from 'vue'
import fileDownload from 'js-file-download'

const infoTable = ref()

const props = defineProps({
  method: { type: String, default: 'store' },
  tableColumns: { type: Array, default: [] },
  mchNo: { type: String, default: '' },
  date: { type: String, default: '' }
})
const vdata: any = reactive({
  searchData: { method: 'store', mchNo: '', queryDateRange: props.date },
  tableColumns: []
})

let btnLoading = ref(false)
let count: any = ref([]) // 数据统计数组


// 请求table接口数据
function reqTableDataFunc(params: any) {
  params.mchNo = props.mchNo
  params.method = props.method
  params.queryDateRange = props.date
  vdata.tableIsShow = true
  reqTableCountFunc(params)
  return req.list(API_URL_STATISTIC, params)
}

function searchFunc() { // 点击【查询】按钮点击事件
  infoTable.value.refTable(true)
}

// 请求table接口数据
function reqTableCountFunc(params: any) {
  req.list(API_URL_STATISTIC + '/total', params).then(res => {
    count.value = [
      { title: '总成交金额', symbol: 'add', textColor: '#1A66FF', content: ((res.allAmount) / 100).toFixed(2) },
      { type: 'line' },
      { title: '总成交笔数', content: (res.payCount) },
      { type: 'line' },
      { title: '总退款金额', symbol: 'sub', content: ((res.refundAmount) / 100).toFixed(2) },
      { type: 'line' },
      { title: '总退款笔数', content: (res.refundCount) },
      { type: 'line' },
      { title: '支付成功率', content: (res.round) + '%' },
    ]
  })
}

function tableExportFunc() {
  return $exportExcel(exportExcelUrl.statistic, Object.assign({}, vdata.searchData, {mchNo: props.mchNo, method: props.method})).then(res => {
    fileDownload(res.data, props.method == 'store'?'门店统计.xlsx':props.method == 'wayCode'?'支付方式统计.xlsx':props.method == 'wayCodeType'?'通道统计.xlsx':'商户统计.xlsx')
  }).catch((error) => { console.log(error) })
}
</script>
<style scoped>
.table-layer .table-search-item {
  width: calc(100% / 6);
}
</style>
